<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <script th:src="@{/script/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/script/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="container-fluid center-block" style="width: 1000px;height: 1080px" >
    <div class="row" style="height: 500px;margin: 150px 0 0 0">
    <button type="button" class="btn btn-primary">添加商品</button>
    <button type="button" class="btn btn-danger">批量删除</button>
        学生id:<input type="text" id="id" name="id" th:value="${id}"  style="width: 100px">
        学生姓名:<input type="text" id="name" name="name" th:value="${name}"  style="width: 100px">
        学生年龄:<input type="text" id="age" name="age" th:value="${age}"  style="width: 100px">
    <table class="table table-hover">
        <thead>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="checkAll"/>
                </label>
                全选/全消
            </td>
            <td>学生ID</td>
            <td >学生姓名</td>
            <td>学生年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="User : ${user.list}">
            <td><input type="checkbox" name="subcheck" th:value="${User.id}"/></td>
            <td th:text="${User.id}" name="uid">Onions</td>
            <td th:text="${User.name}" name="uanme"></td>
            <td th:text="${User.age}" age="uage"></td>
            <td><button th:onclick="'javascript:updateGoods(\''+${User.id}+'\');'">编辑</button>
                <button th:onclick="'javascript:deleteGoods(\''+${User.id}+'\');'">删除</button>
            </td>
        </tr>
        <tr><td colspan="6"> <span> 跳转到第 <input type="text" id="pageNum" name="pageNum" th:onchange="'gotoPage(this.value)'">页</span>
            <span>总计 <span th:text="${user.getPages()}"></span>页</span>
            <span>当前第 <span th:text="${user.pageNum}"></span>页</span>
            <span>  <button  th:onclick="'javascript:gotoPage(\''+1+'\');'">首页</button> </span>
            <button th:onclick="'javascript:gotoPage(\''+${user.prePage}+'\');'" name="prePage">上一页</button>
            <button th:onclick="'javascript:gotoPage(\''+${user.nextPage}+'\');'" name="nextPage">下一页</button>
        </td></tr>
        </tbody>
    </table>
    </div>
</div>
<script>

    // function gotoPage(pageNum) {
    //     if (!isNaN(pageNum)) {
    //         window.location.href = "/?name="+$("#name").val()+"&pageNum="+pageNum;
    //     }else {
    //         alert("请输入合法的数字")
    //     }
    // }
    function gotoPage(pageNum){
        $.ajax({
            type:"get",
            contentType:"text",
            url:"/?name="+$("#name").val()+"&pageNum="+pageNum+"&pageSize=5&id="+$("#id").val()+"&age="+$("#age").val(),
            cache: false,
            async: true,
            data:{},
            success:function (data) {
                console.log(data)
                $('#uid').text(data.id);
                $('#name').text(data.name);
                $('#age').text(data.age);
            }
        })
    }
</script>
</body>
</html>